<template>
    <div class="filmHeader">
        <div class="tabs-bar-wrapper">
            <div class="tabs-bar">
                <ul class="tabs-nav">
                    <router-link to="nowplaying" style="width:50%" tag="li" activeClass="active"><span>正在热映</span></router-link>
                    <router-link to="comingsoon" style="width:50%" tag="li" activeClass="active"><span>即将上映</span></router-link>
                    <div class="tab-ink-bar-wrapper" :style="$store.state.filmHeaderStyle">
                        <span class="tab-ink-bar" style="width:56px;"></span>
                    </div>
                </ul>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.tabs-bar-wrapper {
    position: relative;
    z-index: 100;
    width: 100%;
    overflow-x: hidden;
    background: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    height:49px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    overflow-x:auto ;
    overflow-y: hidden;
    position:relative;
    border-bottom: 1px solid #ccc;
    .tabs-bar {
        width: 100%;
        .tabs-nav{
            width: 100%;
            display:-webkit-flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: center;
            -ms-flex-align: center;
            position: relative;
            width:100%;
            align-items: center;
            .tab-ink-bar-wrapper {
                position:absolute;
                margin:auto;
                top:30px;
                left:0;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                -webkit-transition: -webkit-transform .2s cubic-bezier(.35,0,.25,1);
                transition: -webkit-transform .2s cubic-bezier(.35,0,.25,1);
                -o-transition: transform .2s cubic-bezier(.35,0,.25,1);
                transition: transform .2s cubic-bezier(.35,0,.25,1);
                transition: transform .2s cubic-bezier(.35,0,.25,1),-webkit-transform .2s cubic-bezier(.35,0,.25,1);
                .tab-ink-bar {
                    border-bottom: 2px solid #FF5F16;
                    border-radius: 20px;
                    display: block;
                    margin: auto;
                }
            }
            li{
                margin:0px;
                padding:0px;
                list-style: none;
                display:list-item;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                -webkit-flex-shrink: 0;
                text-align: center;
                height: 16px;
                line-height: 16px;
                color: #191a1b;
                font-size: 14px;
                cursor: pointer;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
            }
            li.active {
                color:#FF5F16
            }
        }
    }
}
.filmHeader{
    z-index: 100;
}
.fixed{
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height: 49px;
    background:white;
}
</style>
